﻿@{
    Uri url = new Uri(Request.Url.AbsoluteUri);
    ViewBag.Server = url.GetLeftPart(UriPartial.Authority);
}

<!DOCTYPE html>
<html>
<head>
    <title>StudentSurvey</title>

    <style>
        #studentform, #myresults, #myresults table {
            width: 90%;
            margin-left: 5%;
        }

        table.surveytable {
            border: solid black;
        }

            table.surveytable th {
                padding: 2px;
                background-color: #3A3A3A;
                color: #ffffff;
            }

            table.surveytable tr:nth-child(even) td {
                background-color: #f0fcd2;
            }
            table.surveytable tr:nth-child(even) td.cat, td.cat {
                background: white;
            }

        table.surveytable td {
            padding: 2px;
            background-color: #ffffff;
            text-align:center;
        }
            table.surveytable td.quest {
                text-align: left;
                font-weight: bold;
                padding-right: 10px;
                background-color: #fefeea;
            }


tbody td.quest, thead th.quest {
    padding: 8px;
    width: 60%;
    float: left;
}
tbody td.ans, thead th.ans {
    padding: 8px;
    width: 10%;
    float: left;
}
tbody td.cat, thead th.cat {
    padding: 8px;
    width: 20%;
    font-weight: bold;
    float: left;

}



.topsect {
    border-top: solid 5px;
}

.hideme {
        display: none;
}

    </style>
   
</head>
<body>
    <div id="studentform">
        <h2>Study Skills Self-Evaluation Questionaire</h2>
        <p>To gain a better understanding of yourself as a learner, it is helpful to identify the study skills you use. You can determine if your study skills need improvement or if you are already using and practicing proper study skills.  This informal inventory is a short and quick tool for assessing your current study skills.</p>
        <p>This is not a test, so please ask for assistance when or where you find the need. Answer each question as honestly as you can. There are 30 questions.</p>
        <p>
            <b>Directions:</b> Read each statement and take a moment to reflect.  Click in the column that best describes your current level as it relates to you and your study skills habits.
            Data is updated as you answer questions.
        </p>
        <table class="surveytable">
            <thead>
                <tr>
                    <th class="quest">Criteria </th>
                    <th class="ans">RARELY</th>
                    <th class="ans">SOMETIMES</th>
                    <th class="ans">OFTEN</th>
                </tr>
            </thead>
            <tbody id="myquestions" data-role="listview" data-template="student-survey-template" data-bind="source: surveySource"></tbody>

        </table>
        <button id="showresults" type="button">Done - See Results</button>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    </div>

    <script type="text/x-kendo-tmpl" id="student-survey-template">
        <tr>
            <td class="quest">#:QuestionText#</td>
            <td class="ans">
                <input type="radio" name="#:QuestionID#" value="Rarely" data-bind="checked: Answer" class="qradio" />
            </td>
            <td class="ans">
                <input type="radio" name="#:QuestionID#" value="Sometimes" data-bind="checked: Answer" class="qradio" />
            </td>
            <td class="ans">
                <input type="radio" name="#:QuestionID#" value="Often" data-bind="checked: Answer" class="qradio" />
            </td>
        </tr>
    </script>

    <div id="myresults" class="hideme">
        <h2>Your Study Skills Self-Evaluation Results</h2>
        <p>Here is how you rated yourself in 6 areas of study skills:</p>
        <table class="surveytable">
            <thead>
                <tr>
                    <th>Study Skill Area</th>
                    <th>Your Rating</th>
                    <th>OK?</th>
                </tr>
            </thead>

            <tbody id="myratings" data-role="listview" data-template="student-ratings-template" data-bind="source: summaryDataSource"></tbody>
        </table>
        <p>If you were honest about your rating, then areas at 30 or above are areas where you are probably ok, but if you are below 30 in any area or you answered RARELY on certain items, you might want to consider the questions in this survey as study suggestions:</p>
        <table class="surveytable">
            <tbody id="myorganizedquestions" data-role="listview" data-template="student-review-template" data-bind="source: surveySource"></tbody>
        </table>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    </div>

    <script type="text/x-kendo-tmpl" id="student-ratings-template">
        <tr>
            <td>
                #:Category#
            </td>
            <td>
                #:TotalRating#
            </td>
            <td>
                # if (TotalRating >=30) {
                # OK #
                } else { # &nbsp; # } #
            </td>
        </tr>
    </script>

    <script type="text/x-kendo-tmpl" id="student-review-template">
        <tr >
            <td class="cat">
                #: newcategory()
                #

            </td>
            <td class="quest  #=rowclass()#">#:QuestionText#</td>
            <td class="ans  #=rowclass()#">
                #:Answer#
            </td>
        </tr>
    </script>
    
    <script>


            //var surveytemplate = kendo.template($("#student-survey-template").html());
            //var ratingstemplate = kendo.template($("#student-ratings-template").html());
        
            var surveyModel = kendo.observable({
                lastcategory: "",
                myrowclass: "",
                firsttime: true,
                summaryDataSource:
                    new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "",
                                dataType: "json"
                            }
                        },
                        sort: { field: "TotalRating", dir: "desc" }
                    }),
                surveySource:
                    new kendo.data.DataSource({
                        requestEnd: function (e) {
                            if (surveyModel.firsttime) {
                                if (surveyModel.surveySource.transport.options.read.url.length > 0 && !$("#studentform").hasClass("hideme")) {
                                    if (surveyModel.surveySource.data().length > 0) {
                                        surveyModel.firsttime = false;
                                        if (surveyModel.surveyComplete()) {
                                            $("#studentform").addClass("hideme");
                                            $("#myresults").removeClass("hideme");
                                            surveyModel.summaryDataSource.transport.options.read.url = crudServiceBaseUrl + "alltables/StudentSurvey_CategoryTotals?where=StudentID=" + viewModel.userID;
                                            surveyModel.summaryDataSource.read();
                                            $("#myratings").html(kendo.render(kendo.template($("#student-ratings-template").html()), surveyModel.summaryDataSource.view()));
                                            surveyModel.surveySource.sort({ field: "Category", dir: "asc" });
                                            $("#myorganizedquestions").html(kendo.render(kendo.template($("#student-review-template").html()), surveyModel.surveySource.view()));
                                        }
                                    }
                                }
                            }
                        },
                        transport: {
                            read: {
                                url: "",
                                dataType: "json"
                            },
                            update: {
                                url: crudServiceBaseUrl + "alltables/SurveyData",
                                dataType: "json",
                                type: "put"
                            },
                            destroy: {
                                url: crudServiceBaseUrl + "alltables/SurveyData/Destroy",
                                dataType: "json"
                            },
                            create: {
                                url: crudServiceBaseUrl + "alltables/SurveyData/Create",
                                dataType: "json"
                            },
                            parameterMap: function (options, operation) {
                                if (operation !== "read" && options.models) {
                                    return { models: kendo.stringify(options.models) };
                                }
                            }
                        },
                        batch: true,
                        schema: {
                            model: {
                                id: "QuestionID",
                                newcategory: function () {
                                    if (surveyModel.lastcategory.trim() == this.get("Category").trim()) {
                                        surveyModel.myrowclass = "";
                                        return " ";
                                    }
                                    else {
                                        surveyModel.lastcategory = this.get("Category");
                                        surveyModel.myrowclass = "topsect";
                                        return this.get("Category");
                                    }
                                },
                                rowclass: function () {
                                    return surveyModel.myrowclass;
                                }

                            }
                        },
                        error: function (e) {

                            alert("There appears to be a network error.\nCheck your connection and then click OK to try again.\n\nIf you keep getting this error, then there is a problem between you and the server.\nIn such a case, you may have to refresh the entire page and you may lose a small amount of your recent work.\n\nIf you KEEP having problems, email portalhelp@rva.org"); // displays "Invalid query"
                            surveyModel.surveySource.sync();
                        },

                        change: function (e) {
                            if (surveyModel.surveySource.hasChanges())
                                surveyModel.surveySource.sync();
                           
                        }
                    }),
                surveyComplete: function () {
                    var tempdata = surveyModel.surveySource.data();
                    var done = true;
                    for (var i = 0; i < tempdata.length; i++) {
                        if (tempdata[i].Answer == null)
                            done = false;
                    }
                    return done;
                }
               

            });
            surveyModel.surveySource.transport.options.read.url = crudServiceBaseUrl + "sqlsp/SP_Student_SurveyData?StudentID=" + viewModel.userID;
       
            $("#showresults").kendoButton({
                click: function (e) {
                    if (surveyModel.surveyComplete()) {
                        surveyModel.summaryDataSource.transport.options.read.url = crudServiceBaseUrl + "alltables/StudentSurvey_CategoryTotals?where=StudentID=" + viewModel.userID;
                        surveyModel.summaryDataSource.read();
                        $("#myratings").html(kendo.render(kendo.template($("#student-ratings-template").html()), surveyModel.summaryDataSource.view()));
                        surveyModel.surveySource.sort({ field: "Category", dir: "asc" });
                        $("#myorganizedquestions").html(kendo.render(kendo.template($("#student-review-template").html()), surveyModel.surveySource.view()));
                        $("#studentform").addClass("hideme");
                        $("#myresults").removeClass("hideme");
                    } else {
                        alert("Please answer all of the questions before you ask for your results. If you are in a rush, you can come back and complete this later, but please don't forget.")
                    }
                }
            });
            kendo.bind(document.body, surveyModel);

 


            
       
    </script>
</body>













</html>